import React from 'react';
import _ from 'underscore';
import View from 'lib/View.jsx';
import Card from 'lib/components/card.jsx';
import ItemSelect from 'lib/components/ItemSelect.jsx';
import TopBar from 'lib/components/TopbarWidget.jsx';
import Layout from '../common/layout.jsx';
import Scope from './MainScope.es6';
import dispatcher from 'lib/dispatcher';

var mapOption = [{
  label:'中国',
  key:'local'
},{
  label:'全球',
  key:'world'
}];

export default class MainView extends View {
  constructor(props){
    super(props);
    this.onSortChange = this.onSortChange.bind(this)
    this.handleSwitchWorldMap = this.handleSwitchWorldMap.bind(this)
  }
  handleSwitchWorldMap(key){
    dispatcher.dispatch({
      $type:'TOGGLE_MAP',
      showWorld: key === 'world'
    })
  }
  onSortChange(key){
    dispatcher.dispatch({
      $type:'CHANGESORT',
      key:key
    })
  }
  render(){
    return (
      <Layout title="地域" subtitle="按地域查看性能">
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-1-3">
            <div className="box">
              <Card className="widget-tab" title={
                  <ItemSelect
                    className="widget-title-tab"
                    options={mapOption}
                    onChange={this.handleSwitchWorldMap}
                    selectKey={this.state.showWorld?'world':'local'}
                  />
                }>
                <ItemSelect options={this.state.sortOptions} onChange={this.onSortChange} />
                <TopBar store={this.state.topbar} />
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-2-3">
            {
              React.cloneElement(this.props.children, {
                routeParams: this.props.params,
                key: this.getHandlerKey() + this.state.showWorld,
                showWorld: this.state.showWorld,
                viewKey: this.state.viewKey
              })
            }
          </div>
        </div>
      </Layout>
    )
  }
}
MainView.defaultProps = {
  Scope:Scope
}
